<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{"APP_ADD"|translate}}</h3>
    <div class="modal-body">
        path: &nbsp;/{{item.path}}
        <form clrForm #itemForm="ngForm">
            <clr-input-container>
                <label>{{'APP_NAME'|translate}}</label>
                <input clrInput size=45 type="text" [(ngModel)]="item.name" name="name" required>
            </clr-input-container>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn btn-primary" [disabled]="itemForm.invalid||isSubmitGoing"
                (click)="onSubmit()">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>